<template>
  <div>
    <el-card>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="统计时间段">
          <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions" size="small" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top:15px">
      <h3 style="text-align:right;font-weight:800">保养总数总计:<span style="color:red">100</span>逾期未保总计:<span style="color:red">100</span>逾期已保总计:<span
          style="color:red">100</span></h3>
      <div ref="echarts1" style="width:100%;height:500px"></div>
    </el-card>
  </div>

</template>

<script>
const echarts = require('echarts')
export default {
  data () {
    return {
      title: '',
      x_Data: '',
      activeName: 'first',
      value2: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
    }
  },
  methods: {
    getDayAll (starDay, endDay) {
      var arr = []
      var dates = []
      // 设置两个日期UTC时间
      var db = new Date(starDay)
      var de = new Date(endDay)
      // 获取两个日期GTM时间
      var s = db.getTime() - 24 * 60 * 60 * 1000
      var d = de.getTime() - 24 * 60 * 60 * 1000
      // 获取到两个日期之间的每一天的毫秒数
      for (var i = s; i <= d;) {
        i = i + 24 * 60 * 60 * 1000
        arr.push(parseInt(i))
      }
      // 获取每一天的时间  YY-MM-DD
      for (var j in arr) {
        var time = new Date(arr[j])
        var year = time.getFullYear(time)
        var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
        var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
        var YYMMDD = year + '-' + mouth + '-' + day
        dates.push(YYMMDD)
      }
      return dates
    },
    onSubmit () {
      if (this.value2) {
        const dataAll = this.getDayAll(this.value2[0], this.value2[1])
        this.title = `${dataAll[0]}至${dataAll[dataAll.length - 1]}电梯逾期情况统计`
        this.initCharts(dataAll.reverse(), this.title)
      }
    },
    initCharts (val, title) {
      console.log()
      const myChart = echarts.init(this.$refs.echarts1)
      myChart.setOption({
        title: {
          text: title,
        },
        grid: {  // 布满div
          top: "50px",
          left: "30px",
          right: "0px",
          bottom: "20px"
        },
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: val
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '保养总数',
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#99cccc", //改变颜色
              },
            },
          },
          {
            name: '逾期未保',
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#ff6666", //改变颜色
              },
            },
          },
          {
            name: '逾期已保',
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#ffcc99", //改变颜色
              },
            },
          }
        ]
      })

      window.addEventListener("resize", () => {
        myChart.resize()
      })
    }
  },
  mounted () {
    var lastMonth = []
    for (var i = 0; i < 30; i++) {
      lastMonth.unshift(new Date(new Date()
        .setDate(new Date().getDate() - i))
        .toLocaleDateString())
    }
    this.x_Data = lastMonth.map(item => {
      return item.replace(/\//g, "-")
    })
    this.title = `${this.x_Data[0]}至${this.x_Data[this.x_Data.length - 1]}电梯逾期情况统计`
    this.initCharts(this.x_Data.reverse(), this.title)
  }
}

</script>
<style lang="less" scoped>
.el-card {
  .el-form {
    ::v-deep .el-form-item__label {
      font-weight: 800;
    }
  }
}
</style>